<template>
  <div class=''>
    <masonry :cols="4"
             :gutter="30"
             class='pa-2 mb-10 '>
      <div
         v-for="(item,index) in images"
         :key="item.name"
         class='my-4'
      >
        <v-card
          width='300'
        >
          <v-img
            ref='img'
            :v-ripple="{ center: true }"
            :src='item.url'
            :lazy-src='thumbImg'
            @click='previewImgObject(index)'
          >
            <template v-slot:placeholder>
              <v-row
                class="fill-height ma-0"
                align="center"
                justify="center"
              >
                <v-progress-circular
                  indeterminate
                  color="primary"
                ></v-progress-circular>
              </v-row>
            </template>
          </v-img>
          <v-card-actions>
            <v-card-title class="font-weight-light">
              {{ item.name }}
            </v-card-title>
            <v-spacer></v-spacer>

            <v-btn
              v-for='icon in cardIcon'
              :key='icon.icon'
              icon
              @click='handler(icon.func,item)'
            >
              <v-tooltip bottom>
                <template v-slot:activator="{ on, attrs }">
                  <v-icon v-bind="attrs"
                          v-on="on">{{icon.icon}}</v-icon>
                </template>
                <span>{{icon.toolTip}}</span>
              </v-tooltip>
            </v-btn>
            <v-menu
              v-if='!isReadOnly'
              bottom
              right
            >
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  icon
                  v-bind="attrs"
                  v-on="on"
                >
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <v-icon v-bind="attrs"
                              v-on="on">mdi-dots-vertical</v-icon>
                    </template>
                    <span>查看更多</span>
                  </v-tooltip>

                </v-btn>
              </template>
              <v-list>
                <v-list-item
                  v-for="(icon, i) in menuList"
                  :key="i"
                  @click='handler(icon.func,item)'
                >
                  <v-icon>{{icon.icon}}</v-icon>
                  {{icon.toolTip}}
                </v-list-item>
              </v-list>
            </v-menu>
          </v-card-actions>
        </v-card>
      </div>
    </masonry>

    <!--    查看标签对话框-->
    <v-dialog
      v-model="tagDialog"
      transition="dialog-bottom-transition"
      max-width="600px"
    >
      <v-card>
        <v-card-title>
          <span class='text-h5'>{{selectedImgName}} 的标签集</span>
          <v-spacer></v-spacer>
          <v-switch
            v-model="editTagActive"
            label="编辑模式"
          ></v-switch>
        </v-card-title>
        <v-divider/>
        <v-card-text class='pa-4'>
          <v-card-text v-if='tagLoading'>
            请等待
            <v-progress-linear
              indeterminate
              color="secondary"
              class="mb-0"
            ></v-progress-linear>
          </v-card-text>
          <div v-else class='text-center'>
            <v-chip
              v-for='item in tagList'
              :key='item.ID'
              class='ma-3'
              :close='editTagActive'
              draggable
              @click:close='removeTag(item)'
            >
              {{item.TAG}}
            </v-chip>
            <v-chip
              color="secondary"
              @click='setTagDialog=true'
            >
              <v-icon>mdi-plus</v-icon>
              增加标签
            </v-chip>
          </div>
        </v-card-text>
      </v-card>
    </v-dialog>
    <!--    添加标签对话框-->
    <v-dialog
      v-model="setTagDialog"
      transition="dialog-bottom-transition"
      max-width="400px"
      @close="newTagName=''"
    >
      <v-card>
        <v-card-title>
          <span class='text-h5'>添加标签</span>
        </v-card-title>
        <v-divider/>
        <v-card-text class='pa-4'>
          <v-text-field
            label='标签名'
            v-model='newTagName'
          >
          </v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            text
            @click="setTagDialog = false"
          >
            取消
          </v-btn>
          <v-btn
            color="primary"
            text
            :disabled="newTagName===''"
            :loading='setTagLoading'
            @click="setTag"
          >
            添加
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!--    查看详细信息对话框-->
    <v-dialog
      v-model="detailDialog"
      transition="dialog-bottom-transition"
      max-width="600px"
    >
      <v-card>
        <v-card-title>
          <span class='text-h5'>照片信息</span>
        </v-card-title>
        <v-divider/>
        <v-card-text>
          <v-card-text v-if='exifLoading'>
            请等待
            <v-progress-linear
              indeterminate
              color="secondary"
              class="mb-0"
            ></v-progress-linear>
          </v-card-text>
          <v-simple-table>
            <template v-slot:default>
              <thead>
              <tr>
                <th class="text-left">
                  属性
                </th>
                <th class="text-left">
                  值
                </th>
              </tr>
              </thead>
              <tbody>
              <tr
                v-for="item in Object.keys(exifItems)"
                :key="item"
              >
                <td>{{ item }}</td>
                <td>{{ exifItems[item]['value'] }}</td>
              </tr>
              </tbody>
            </template>
          </v-simple-table>

        </v-card-text>
      </v-card>

    </v-dialog>
    <!--    删除确认对话框-->
    <v-dialog
      v-model="deleteDialog"
      width="500"
    >
      <v-card>
        <v-card-title class="text-h4 grey lighten-2">
          删除确认
        </v-card-title>
        <v-divider/>
        <v-card-text class="text-h5 black--text">
          将删除图片'{{selectedImgName}}',确定吗?
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            text
            @click="deleteDialog = false"
          >
            取消
          </v-btn>
          <v-btn
            color="primary"
            text
            @click="deleteImg"
          >
            删除
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
<!--    编辑图片对话框-->
    <image-process
      :dialog='processDialog'
      :img='currentItem'
      :groupName='groupName'
      :tagName='tagName'
      @freshList='freshList'
      :isReadOnly='isReadOnly'
      @on-change-dialog='(val)=>this.processDialog = val'
    />
  </div>
</template>

<script>
  import imagesApi from '@/api/apiPath/imagesApi'
  import ImageProcess from '@/components/album/ImageProcess'

  export default {
    name: 'ImagesGallery',
    components: {
      ImageProcess
    },
    props: {
      images: {
        default: []
      },
      cardIcon: {
        default: []
      },
      menuList: {
        default: []
      },
      isReadOnly: {
        type: Boolean
      },
      tagName: {
        default: ''
      },
      groupName: {
        default: ''
      }
    },
    computed: {
      imgUrls() {
        return this.images.map(o => o.url)
      }
    },
    data() {
      return {
        tagList: [],
        thumbImg: require('@/assets/logo.png'),
        exifLoading: true,
        tagLoading: true,
        setTagLoading: false,
        newTagName: '',
        tagDialog: false,
        setTagDialog: false,
        detailDialog: false,
        selectedImgName: '',
        deleteDialog: false,
        editTagActive: false,
        processDialog: false,
        currentItem: {},
        exifItems: {},
        options: {
          width: 300,
          padding: {
            default: 12
          }
        }
      }
    },
    methods: {
      handler(func,val) {
        this[func](val)
      },
      joinFavorite(val) {

      },
      async showTagDialog(val) {
        this.selectedImgName = val.name
        this.tagDialog = true
        this.tagLoading = true
        await this.getTagList()
        this.tagLoading = false
      },
      clearTable() {

      },
      showProcess(val) {
        this.currentItem = val
       this.$nextTick(() => {
         this.processDialog = true
       })

      },
      async showDetail(val) {
        this.detailDialog = true
        const result = await imagesApi.getDetail({
          url: `${val.url}?x-oss-process=image/info`
        })
        this.exifLoading = false
        this.exifItems = result.data
        console.log(this.exifItems)
      },
      deleteImgDialog(val) {
        this.selectedImgName = val.name
        this.deleteDialog = true
      },
      async deleteImg() {
        const data = {
          name: this.selectedImgName
        }
        if (this.groupName) {
          data.groupName = this.groupName
        }
        const result = await imagesApi.deleteImage(data)
        this.$toast.success(`${this.selectedImgName} 删除成功!`)
        this.deleteDialog = false
        setTimeout(() => {
          this.$emit('freshList')
        },500)
      },
      async getTagList() {
        const { data: result } = await imagesApi.getTagList(this.selectedImgName)
        result.forEach(item => {
          item.show = true
        })
        this.tagList = result
      },
      async setTag() {
        try {
          this.setTagLoading = true
          const { data: result } = await imagesApi.setTag({
            fileName: this.selectedImgName,
            tagName: this.newTagName
          })
          this.$toast.success(result)
          await this.getTagList()
          this.setTagLoading = false
        } catch (e) {
          this.$toast.error(e)
        }
        this.setTagDialog = false
      },
      async removeTag(val) {
        this.tagLoading = true
        try {
          const { data: result } = await imagesApi.removeTag({
            fileName: this.selectedImgName,
            tagName: val.TAG
          })
          this.$toast.success(result)
          await this.getTagList()
          this.tagLoading = false
        } catch (e) {
          this.$toast.error(e)
        }
      },
      previewImgObject (index) {
        // 或者你可以单独引入api然后执行它
        const $viewer = this.$viewerApi({
          options: {
            toolbar: true,
            initialViewIndex: index
          },
          images: this.imgUrls
        })
      },
      freshList() {
        this.$emit('freshList')
      }
    },
    mounted() {
    },
    watch: {
      detailDialog: {
        // 关闭对话框时清除数据
        handler(val) {
          if (val === false) {
            setTimeout(() => {
              this.exifItems = {}
              this.exifLoading = true
            },500)
          }
        }
      }
    }
  }
</script>

<style scoped>
  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    line-height: 0;
    display: block;
  }
</style>
